<template>
  <div class="dy-main accountCardDetail2">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true" :left-options="{preventGoBack:true}" @on-click-back="back">卡片详情</x-header>
      <p class="message">
        <img class="logoImg" src="../../assets/img/Account/title-logo.png">
        <span>{{list.subAcctNo}}</span>
        <span class="cardType">{{list.subAcctType}}</span>
      </p>
    </div>
    <div class="dy-body">
      <group gutter="0">
        <cell title="卡片别名" :value="list.alias"  class="cell"></cell>
        <cell title="等级/类型" :value="list.grade"  class="cell"></cell>
        <cell title="币种" :value="list.currency"  class="cell"></cell>
        <cell title="账单日" :value="list.billingDate"  class="cell"></cell>
        <cell title="还款到期日" :value="list.nextPaymentDate"  class="cell"></cell>
        <cell title="消费额度" :value="list.consumeLimit"  class="cell"></cell>
        <cell title="当前欠款" :value="list.floatUserDebt"  class="cell"></cell>
        <cell title="账户状态" :value="list.accountStatus"  class="cell"></cell>
      </group>
      <group gutter=".2rem">
        <x-switch title="消费凭密码" v-model="consumeByPwd" class="cell cell-switch"></x-switch>
        <x-switch title="小额免密码" v-model="smallAccountFreePwd" class="cell cell-switch"></x-switch>
      </group>
      <group>
        <cell title="账单查询" value="" class="cell" is-link></cell>
        <cell title="快速还款" :value="list.quickRepayment" class="cell" is-link></cell>
        <cell title="积分兑换" :value="list.creditsExchange" class="cell" is-link></cell>
        <cell title="交易明细" value="" class="cell" is-link @click.native="gotoTranDetail()"></cell>
        <cell title="设置别名" value="" class="cell" is-link></cell>
        <x-switch title="卡片锁定/解锁" v-model="lock" class="cell cell-switch"></x-switch>
        <cell title="快捷支付管理" value="" class="cell" is-link></cell>
        <x-switch title="设置默认卡片" v-model="defaultCard" class="cell cell-switch"></x-switch>
      </group>
      <x-button @click.native="deleteCard()" action-type="button" plain type="warn" class="del">删除</x-button>
    </div>
  </div>

</template>

<script>
/* eslint-disable key-spacing,comma-dangle */

import {Group, Cell, XButton, XInput, XSwitch} from 'vux'

export default{
  components: {
    Group,
    Cell,
    XButton,
    XInput,
    XSwitch
  },
  data () {
    return {
      //  list: {
      //    subAcctNo: '', // 卡号
      //    subAcctType: '', // 卡类型
      //    alias: '', // 卡片别名
      //    grade: '', // 等级/类型
      //    currency: '', // 币种
      //    billingDate: '', // 账单日
      //    nextPaymentDate: '', // 还款到期日
      //    consumeLimit: '', // 消费额度
      //    floatUserDebt: '', // 当前欠款
      //    quickRepayment: '', // 快速还款
      //    creditsExchange: '', // 积分兑换
      //    accountStatus: '', // 账户状态
      //  },
      list: {
        subAcctNo: '6210 **** **** 219', // 卡d号
        subAcctType: '理财卡/默认卡', // 卡类型
        alias: '携程卡', // 卡片别名
        grade: '主卡', // 等级/类型
        currency: '人民币', // 币种
        billingDate: '每月12日', // 账单日
        nextPaymentDate: '每月01日', // 还款到期日
        consumeLimit: '12,000.00元', // 消费额度
        floatUserDebt: '300.00元', // 当前欠款
        quickRepayment: '本期剩余未还120.00元', // 快速还款
        creditsExchange: '3000份', // 积分兑换
        accountStatus: '正常', // 账户状态
      },
      consumeByPwd : false, // 消费凭密码
      smallAccountFreePwd :true, // 小额免密码
      lock: false, // 卡片锁定
      defaultCard: true, // 设置默认卡片
    }
  },
  // created() {
  //   this.getData()
  // },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    gotoTranDetail () {
      this.$router.push({name: 'AccountTranDetail'})
    },
    getData () {
      let _this = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'CI00Credit', 'user_Data': {'cardNo': '456A48579BF3337FE9C'}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.list = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    },
    deleteCard () {
      return 'deleted'
    }
  }
}
</script>
<style lang="less">
  .accountCardDetail2 {
    .dy-header {
      height: 1.9rem;
      .message {
        display: flex;
        height: 1rem;
        background-color: #f7f8fa;
        font-size: .3rem;
        line-height: 1rem;
        padding-left: .3rem;
        font-weight: bold;
        color: #333;
        .logoImg {
          height: .5rem;
          width: .5rem;
          display: block;
          margin-top: .23rem;
          margin-right: .12rem;
        }
        span {
          margin-right: .14rem;
          font-size: .3rem;
        }
        .cardType {
          font-size: .26rem;
          color: #999;
        }
      }
    }
    .dy-body {
      padding-top: 1.9rem;
      overflow: auto;
      .del {
        background-color: #fff;
        border-color: #ec1b30;
        width: 6.9rem;
        height: .88rem;
        margin-top: .64rem;
        margin-bottom: .8rem;
        font-size: .34rem;
      }
    }
  }
</style>
